layui.use(["layer", "echarts"], function () {
  // 2020-03-25 HF sessionStorage中取出数据
  var token = sessionStorage.getItem("newtoken");
  var device = JSON.parse(sessionStorage.getItem("Savedevice")).deviceCode;

  var $ = layui.jquery,
    echarts = layui.echarts;
  $("#Myloading2").remove();
  /*************曲线图初始化*******************/
  var beginTime1 = $("#beginTime").val();
  var endTime1 = $("#endTime").val();

  if (beginTime1 == "" && endTime1 == "") {
    function add0(m) {
      return m < 10 ? "0" + m : m;
    } //避免少0
    // 当前时间
    var time = new Date();
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    var s2 =
      year +
      "-" +
      add0(month) +
      "-" +
      add0(date) +
      " " +
      add0(hours) +
      ":" +
      add0(minutes) +
      ":" +
      add0(seconds);
    // var s2 = setInterval(function(){
    //     return 2
    // })
    // console.log(s2);
    var s1 =
      year +
      "-" +
      add0(month) +
      "-" +
      add0(date) +
      " " +
      add0(0) +
      ":" +
      add0(0) +
      ":" +
      add0(0);
    $("#beginTime").val(s1);
    $("#endTime").val(s2);

    // 实时更新当前时间
    var cltime = setInterval(function () {
      let nowtime = new Date();
      var s1 = GMTToStr(nowtime);
      $("#endTime").val(s1);
    }, 1000);

    // 初始化为当前一天的时间
    beginTime1 = s1;
    endTime1 = s2;
    $.ajax({
      url:
        "/oms-web/cable/trouble-point?token=" +
        token +
        "&beginTime=" +
        beginTime1 +
        "&endTime=" +
        endTime1 +
        "&devCode=" +
        device,
      dataType: "json",
      type: "get",
      contentType: "application/json",
      success: function (data) {
        console.log(data);
        if (data.code === 0) {
          $("#CurveSeach").click();
        }
      },
      error: function () {
        layer.msg("数据请求错误,请检查时间格式！");
        layer.close(index);
      },
      // ****************************************//
    });
  }

  // 获取时间 请求数据
  // ****************************************//
  $("#CurveSeach").click(function () {
    var beginTime = $("#beginTime").val();
    var endTime = $("#endTime").val();
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    // 判断时间非空
    if (beginTime != "" && endTime != "") {
      function getDaysByDateString(dateString1, dateString2) {
        var startDate = Date.parse(dateString1);
        var endDate = Date.parse(dateString2);
        var diffDate = endDate - startDate + 1 * 24 * 60 * 60 * 1000; //
        var days = parseInt(diffDate / (1 * 24 * 60 * 60 * 1000));
        return days;
      }
      // 验证查询时间   不能过大和过小
      days = getDaysByDateString(beginTime, endTime);
      if (days > 180) {
        layer.msg("错误！查询时间段不能大于180天");
        return false;
      }
      if (days < 0 || days == 0) {
        layer.msg("错误！开始时间必须小于结束时间");
        return false;
      }
      index = layer.load(1);
      getHcurveData(beginTime, endTime);
    } else {
      layer.msg("请填写开始时间 -- 结束时间！");
    }
    echartsA.clear();
    echartsB.clear();
    echartsC.clear();
  });
  /***********************最近24小时***********************/
  $("#24hours").click(function () {
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    var s1 = GMTToStr(start);
    var s2 = GMTToStr(end);
    index = layer.load(1);
    echartsA.clear();
    echartsB.clear();
    echartsC.clear();

    getHcurveData(s1, s2);
  });
  /***********************最近三天***********************/
  $("#threeDay").click(function () {
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
    var s1 = GMTToStr(start);
    var s2 = GMTToStr(end);
    index = layer.load(1);
    echartsA.clear();
    echartsB.clear();
    echartsC.clear();

    getHcurveData(s1, s2);
  });
  $("#week").click(function () {
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    var s1 = GMTToStr(start);
    var s2 = GMTToStr(end);
    index = layer.load(1);
    echartsA.clear();
    echartsB.clear();
    echartsC.clear();

    getHcurveData(s1, s2);
  });
  /***********************最近一个月***********************/
  $("#month").click(function () {
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    var s1 = GMTToStr(start);
    var s2 = GMTToStr(end);
    index = layer.load(1);
    echartsA.clear();
    echartsB.clear();
    echartsC.clear();
    getHcurveData(s1, s2);
  });
  /**********************************************/

  /**********************************************/
  //2020-03-27 HF  请求曲线接口
  function getHcurveData(beginTime, endTime) {
    var echartsA = echarts.init(document.getElementById("echarts-A"));
    var echartsB = echarts.init(document.getElementById("echarts-B"));
    var echartsC = echarts.init(document.getElementById("echarts-C"));
    $.ajax({
      url:
        "/oms-web/cable/trouble-point?token=" +
        token +
        "&beginTime=" +
        beginTime +
        "&endTime=" +
        endTime +
        "&devCode=" +
        device,
      dataType: "json",
      type: "get",
      contentType: "application/json",
      success: function (value) {
        // console.log(value, "123", "value");
        if (value.code === 0) {
          // loading加载动画
          layer.close(index);
          // console.log(data.data);
          var DataTable = value.data;
          if (DataTable != null && DataTable != undefined) {
            let Adata = [];
            let Bdata = [];
            let Cdata = [];
            DataTable.map((i) => {
              if (i.type === "A") {
                optionA = {
                  title: {
                    text: i.type,
                    textBaseline: "middle",
                    top: "55",
                  },
                  tooltip: {
                    position: "top",
                  },
                  xAxis: {
                    type: "value",
                    min: 0,
                    max: 100,
                    axisLine: {
                      show: true,
                    },
                    axisLabel: {
                      interval: 0,
                    },
                    splitLine: false,
                  },
                  yAxis: {
                    type: "category",
                    data: [],
                    show: false,
                    min: 0,
                    max: 100,
                  },
                  dataZoom: [
                    {
                      type: "inside",
                      start: 0,
                      end: 100,
                    },
                  ],
                  series: [
                    {
                      type: "scatter",
                      data: Adata,
                      lineStyle: {
                        width: 5,
                      },
                      itemStyle: {
                        normal: {
                          color: function (params) {
                            var colorList = [
                              "#ee6666",
                              "#5470c6",
                              "#26c0c0",
                              "#fac858",
                              "#3ba272",
                              "#fc8452",
                              "#ea7ccc",
                              "#73c0de",
                              "#9a60b4",
                              "#91cc75",
                            ];
                            return colorList[params.dataIndex];
                          },
                          borderColor: "#ffffff", //拐点边框颜色
                          borderWidth: 2, //拐点边框大小
                        },
                      },
                    },
                  ],
                };
                Adata.push([(i.value * 100).toFixed(2), 0]);
                echartsA.clear();
                echartsA.setOption(optionA);
                console.log(optionA, "A");
              }
              if (i.type === "B") {
                optionB = {
                  title: {
                    text: i.type,
                    textBaseline: "middle",
                    top: "55",
                  },
                  tooltip: {
                    position: "top",
                  },
                  dataZoom: [
                    {
                      type: "inside",
                      start: 0,
                      end: 100,
                    },
                  ],
                  xAxis: {
                    type: "value",
                    min: 0,
                    max: 100,
                    axisLine: {
                      show: true,
                    },
                    axisLabel: {
                      interval: 0,
                    },
                    splitLine: false,
                  },
                  legend: {
                    show: true,
                    textStyle: {
                      color: "pink", //字体颜色
                    },
                  },
                  yAxis: {
                    type: "category",
                    data: [],
                    show: false,
                    min: 0,
                    max: 100,
                  },
                  series: [
                    {
                      type: "scatter",
                      data: Bdata,
                      lineStyle: {
                        width: 5,
                      },
                      itemStyle: {
                        normal: {
                          color: function (params) {
                            var colorList = [
                              "#ee6666",
                              "#5470c6",
                              "#26c0c0",
                              "#fac858",
                              "#3ba272",
                              "#fc8452",
                              "#ea7ccc",
                              "#73c0de",
                              "#9a60b4",
                              "#91cc75",
                            ];
                            return colorList[params.dataIndex];
                          },
                          borderColor: "#ffffff", //拐点边框颜色
                          borderWidth: 2, //拐点边框大小
                        },
                      },
                    },
                  ],
                };
                Bdata.push([(i.value * 100).toFixed(2), 0]);
                echartsB.clear();
                echartsB.setOption(optionB);
                // console.log(optionB, "B");
              }
              if (i.type === "C") {
                optionC = {
                  title: {
                    text: i.type,
                    textBaseline: "middle",
                    top: "55",
                  },
                  tooltip: {
                    position: "top",
                  },
                  dataZoom: [
                    {
                      type: "inside",
                      start: 0,
                      end: 100,
                    },
                  ],
                  xAxis: {
                    type: "value",
                    min: 0,
                    max: 100,
                    axisLine: {
                      show: true,
                    },
                    axisLabel: {
                      interval: 0,
                    },
                    splitLine: false,
                  },
                  yAxis: {
                    type: "category",
                    data: [],
                    show: false,
                    min: 0,
                    max: 100,
                  },
                  series: [
                    {
                      type: "scatter",
                      data: Cdata,
                      lineStyle: {
                        width: 5,
                      },
                      itemStyle: {
                        normal: {
                          color: function (params) {
                            var colorList = [
                              "#ee6666",
                              "#5470c6",
                              "#26c0c0",
                              "#fac858",
                              "#3ba272",
                              "#fc8452",
                              "#ea7ccc",
                              "#73c0de",
                              "#9a60b4",
                              "#91cc75",
                            ];
                            return colorList[params.dataIndex];
                          },
                          borderColor: "#ffffff", //拐点边框颜色
                          borderWidth: 2, //拐点边框大小
                        },
                      },
                    },
                  ],
                };
                Cdata.push([(i.value * 100).toFixed(2), 0]);
                echartsC.clear();
                echartsC.setOption(optionC);
                // console.log(optionC, "C");
              }
            });
          }
        }
      },
      error: function () {
        layer.msg("数据请求错误,请检查时间格式！");
        layer.close(index);
      },
      // ****************************************//
    });
  }

  //获取时间函数
  function GMTToStr(time) {
    function add0(m) {
      return m < 10 ? "0" + m : m;
    } //避免少0
    var time = new Date(time);
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    return (
      year +
      "-" +
      add0(month) +
      "-" +
      add0(date) +
      " " +
      add0(hours) +
      ":" +
      add0(minutes) +
      ":" +
      add0(seconds)
    );
  }

  $("#beginTime").datetimepicker({
    language: "zh-CN", //显示中文
    format: "yyyy-mm-dd hh:ii:ss", //显示格式
    // minView: "month",//设置只显示到月份
    initialDate: new Date(), //初始化当前日期
    autoclose: true, //选中自动关闭
    todayBtn: true, //显示今日按钮
    // minView:'month',
    language: "zh-CN",
  });
  $("#endTime")
    .datetimepicker({
      language: "zh-CN", //显示中文
      format: "yyyy-mm-dd hh:ii:ss", //显示格式
      // minView: "month",//设置只显示到月份
      initialDate: new Date(), //初始化当前日期
      autoclose: true, //选中自动关闭
      todayBtn: true, //显示今日按钮
      // minView:'month',
      language: "zh-CN",
    })
    .on("changeDate", function (ev) {
      window.clearInterval(cltime);
    });
});
